import React, {Component} from 'react';
import {Modal, Form, Input} from 'antd';

const FormItem = Form.Item;

class ModuleEditModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const {okHandler} = this.props;
    this.props.form.validateFields((err, values) => {
      debugger;
      if (!err) {
        okHandler(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const {children} = this.props;
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };

    return (
      <span>
        <span onClick={this.showModelHandler}>
          { children }
        </span>
        <Modal
          title="Edit User"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
        >
          <Form horizontal onSubmit={this.okHandler}>
            <FormItem {...formItemLayout} label="名称" hasFeedback>
              {getFieldDecorator('name', {
                initialValue:null,
                rules: [{ required: true, message: '请输入名称！'}],
              })(
                <Input />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="拼音" hasFeedback>
              {getFieldDecorator('spell', {
                initialValue:null,
                rules: [{ required: true, message: '请输入拼音！'}],
              })(
                <Input />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="详情" hasFeedback>
              {getFieldDecorator('detail', {
                initialValue:null,
                rules: [{ required: true, message: '请输入详情！'}],
              })(
                <Input />
              )}
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create({})(ModuleEditModal) ;
